<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>高效视频资源网站</title>

    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" href="/static/css/style2.css" type="text/css">
    <script type="text/javascript" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    
</head>
<body>
<div th:replace="header::header1"></div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- ol指示器  ol标签与ul标签不同 ol为是有序列表 ul为是无序列表 -->
    <ol class="carousel-indicators">
        <!-- 指示器 -->
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- 包装的轮播图片-->
    <div class="carousel-inner" role="listbox">
        <!--图片-->
        <div class="item active">
            <img src="../static/img/1.jpg" alt="风景1">
            <div class="carousel-caption">
                <!--h4中的内容显示到图片上面，-->
                <h4>真正的才智是刚毅的志向。 —— 拿破仑</h4>
            </div>
        </div>
        <div class="item">
            <img src="../static/img/2.jpg" alt="风景2">
            <div class="carousel-caption">
                <h4>志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4>
            </div>
        </div>
        <div class="item">
            <img src="../static/img/3.jpg" alt="风景3">
            <div class="carousel-caption">
                <h4>但行好事，莫问前程。 —— 武老伯</h4>
            </div>
        </div>
        <div class="item">
            <img src="../static/img/4.jpg" alt="风景4">
            <div class="carousel-caption">
                <h4>生活有度，人生添寿。 —— 书摘</h4>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column">
            <h2>
                平台介绍
            </h2>
            <p style="text-indent: 200px">
                在线学习交流平台主要是学习者通过网络学习的一种学习媒介，学习者可以在在线学习交流平台上获取学习资源、跟老师进行活动，或者与其他学习者进行交流讨论。
                在线学习平台是基于互联网的，相对于传统的学校或培训机构的课堂教学。基于不同的目标，对地域没有要求，但对时间有要求，传课网上的课程多采用这种形式。在线学习交流平台界面友好，
                良好的学习环境，无需安装系统软件，登录在线学习平台，开通账号即可学习，简介清楚的学习界面，向学习者提供友好的在线学习环境。<a class="btn" href="#">更多 »</a>
            </p>

        </div>
        <div class="col-md-7 col-md-offset-2 main">
<!--            <h2>-->
<!--                在线学习交流平台相关书籍-->
<!--            </h2>-->
<!--            <p>-->
<!--                <img src="../static/img/book1.jpg" height="200" width="180" />-->
<!--                <img src="../static/img/book3.jpg" height="200" width="180" />-->
<!--                <img src="../static/img/book2.jpg" height="200" width="180" />-->

<!--            </p>-->
            <h3 class="text-info">最新公告</h3>


                <ul th:if="${pageInfo.list}">
                    <th:block th:each="news:${pageInfo.list}">
                    <li>
                        <a th:href="@{'/getNewsById?id='+${news.id}}" th:text="${news.title}"></a>
                        ---------------------------------发布时间：<span th:text="${news.time}"></span>
                        <a th:href="@{'/getNewsById?id='+${news.id}}"><i>阅读全文»»</i></a>
                    </li>
                    </th:block>
                </ul>

            <ul class="pagination">
                <li th:if="${pageInfo.hasPreviousPage}">
                    <a th:href="@{'/page?pageNum='+${pageInfo.pageNum-1}}">上一页</a>

                </li>
                <li th:if="${pageInfo.hasNextPage}">
                    <a th:href="@{'/page?pageNum='+${pageInfo.pageNum+1}}">下一页</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div th:replace="footer::footer1"></div>
</body>
</html>
